<template>
	<el-card class="box-card-component" style="margin-left:8px;">
		<div slot="header" class="box-card-header">
			<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png" />
		</div>
		<div style="position:relative;">
			<pan-thumb :image="avatar" class="panThumb"></pan-thumb>
			<mallki class-name="mallki-text" text="vue-element-admin"></mallki>
			<div style="padding-top:35px;" class="progress-item">
				<span>Vue</span>
				<el-progress :percentage="70"></el-progress>
			</div>
			<div class="progress-item">
				<span>JavaScript</span>
				<el-progress :percentage="18"></el-progress>
			</div>
			<div class="progress-item">
				<span>Css</span>
				<el-progress :percentage="12"></el-progress>
			</div>
			<div class="progress-item">
				<span>ESLint</span>
				<el-progress :percentage="100" status="success"></el-progress>
			</div>
		</div>
	</el-card>
</template>

<script>
	import { mapGetters } from '/vue/libs/vuex.esm.browser.min.js'
	const l = httpVueLoader;
	const PanThumb = l('/vue/components/PanThumb/index.vue');
	const Mallki = l('/vue/components/TextHoverEffect/Mallki.vue');

	module.exports = {
		components: { "pan-thumb": PanThumb, "mallki": Mallki },

		filters: {
			statusFilter(status) {
				const statusMap = {
					success: 'success',
					pending: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				statisticsData: {
					article_count: 1024,
					pageviews_count: 1024
				}
			}
		},
		computed: {
			...mapGetters([
				'name',
				'avatar',
				'roles'
			])
		}
	}
</script>

<style scoped>
	.box-card-component .box-card-header {
		position: relative;
		height: 220px;
	}

		.box-card-component .box-card-header img {
			width: 100%;
			height: 100%;
			transition: all 0.2s linear;
		}

			.box-card-component .box-card-header img:hover {
				transform: scale(1.1, 1.1);
				filter: contrast(130%);
			}

	.box-card-component .mallki-text {
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: 20px;
		font-weight: bold;
	}

	.box-card-component .panThumb {
		z-index: 100;
		height: 70px !important;
		width: 70px !important;
		position: absolute !important;
		top: -45px;
		left: 0px;
		border: 5px solid #ffffff;
		background-color: #fff;
		margin: auto;
		box-shadow: none !important;
	}

		.box-card-component .panThumb /deep/ .pan-info {
			box-shadow: none !important;
		}

	.box-card-component .progress-item {
		margin-bottom: 10px;
		font-size: 14px;
	}

	@media only screen and (max-width: 1510px) {
		.box-card-component .mallki-text {
			display: none;
		}
	}
</style>
